<!DOCTYPE html>

<html>

<head>
    <title>Example 01.04 - Materials, light and animation</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <script type="text/javascript" src="../libs/spin.js"></script>
    <script type="text/javascript" src="../libs/ThreeBSP.js"></script>
    <script src="../libs/OrbitControls.js"></script>  
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
    function BunsenBurner(){
        var h=20;
        this.height=h;
        this.radius=h/15;
        this.x=0;
        this.y=0;
        this.z=0;
        var h1,h2,h3;
        var r1,r2,r3;
        h1=0.05*h;
        h2=0.80*h;
        h3=0.15*h;
        r1=h/2.5;
        r2=this.radius;
        r3=this.radius*1.2;
        var m1=new THREE.MeshStandardMaterial({color:"blue"});
        var m2=new THREE.MeshStandardMaterial({color:"gray"});
        var m3=new THREE.MeshStandardMaterial({color:"gold"});
        var c1=new THREE.CylinderGeometry(r1,r1,h1,32,1);
        var c2=new THREE.CylinderGeometry(r2,r2,h2,32,1);
        var c3=new THREE.CylinderGeometry(r2*0.8,r2*0.8,h2,32,1);
        var c4=new THREE.CylinderGeometry(r3,r3,h3,32,1);
        var c5=new THREE.CylinderGeometry(r2*0.8,r2*0.8,h3,32,1);
        c1=new THREE.Mesh(c1,m1);
        c2=new THREE.Mesh(c2,m2);
        c3=new THREE.Mesh(c3,m2);
        c4=new THREE.Mesh(c4,m3);
        c5=new THREE.Mesh(c5,m3);
        c1.position.set(0,h1/2,0);
        var b2=new ThreeBSP(c2);
        var b3=new ThreeBSP(c3);
        var b4=new ThreeBSP(c4);
        var b5=new ThreeBSP(c5);
        b2=b2.subtract(b3);
        c2=b2.toGeometry();
        c2=new THREE.Mesh(c2,m2);
        c2.position.set(0,(h1+h2)/2,0);
        b4=b4.subtract(b5);
        c4=b4.toGeometry();
        c4=new THREE.Mesh(c4,m3);
        c4.position.set(0,h1/2+h2+(h3/2),0);
        var r=c1;
        r.add(c2);
        r.add(c4);
        this.Mesh=r;
        this.translate=translate;
        this.move=move;
    }
    function move(x,y,z){
        this.x=x;;
        this.y=y;
        this.z=z;
        this.Mesh.position.set(this.x,this.y,this.z);
    }
    function translate(x,y,z){
        this.x+=x;
        this.y+=y;
        this.z+=z;
        this.Mesh.position.set(this.x,this.y,this.z);
    }
    function pour(o1,o2,q){

    }
    function wash(obj,basin){

    }
    // once everything is loaded, we run our Three.js stuff.
    function init() {
        var stats = initStats();
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();
        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0x436521, 1));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);
        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);
        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);
        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);
        // call the render function
        
        r=new BunsenBurner();
        //r.Mesh.geometry.mergeVertices();
        //r.Mesh.geometry.computeVertexNormals();
        scene.add(r.Mesh);
        var temp=new THREE.Mesh(new THREE.CylinderGeometry(1,1,1,32,1),new THREE.MeshBasicMaterial({color:"white"}));
        temp.position.set(0,0.5,0);
        scene.add(temp);
        var controls = new THREE.OrbitControls( camera, renderer.domElement );
        renderScene();
        var x=1;
        function renderScene() {
            stats.update();
            controls.update(); 
            requestAnimationFrame(renderScene);
            renderer.render(scene, camera);
        }
        function initStats() {

            var stats = new Stats();
            stats.setMode(0); // 0: fps, 1: ms
            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>
